<template>
<div id="TopA">
  <el-row type="flex" justify="center" align="middle" class="adjustment">
    <el-col :span="13">
      <div class="title" v-on:click="backHome" style="cursor: pointer">
        在线购物系统
      </div>
    </el-col>
    <el-col :span="8">
      <el-input
        v-if="role !== 'seller'"
        placeholder="请输入内容"
        prefix-icon="el-icon-search"
        clearable
        class="input-search"
        v-on:keydown.enter.native="searchGood"
        v-model="search">
      </el-input>
    </el-col>
    <el-col :span="3">
      <el-dropdown>
        <img src="static/cd.png" class="cd-img">
        <el-dropdown-menu slot="dropdown">
          <div style="text-align: center; font-family: 'Microsoft YaHei', sans-serif">{{customName?customName: "请先登录"}}</div><hr/>
          <el-dropdown-item v-on:click.native="register" v-if="uid === null">注册</el-dropdown-item>
          <el-dropdown-item v-on:click.native="login" v-if="uid === null">登录</el-dropdown-item>
          <el-dropdown-item v-on:click.native="unlogin" v-if="uid !== null">退出登录</el-dropdown-item>
<!--          <el-dropdown-item v-on:click.native="dialogBuyInformationVisible = true" v-if="uid !== null">购买记录</el-dropdown-item>-->
          <el-dropdown-item v-on:click.native="updateInformation" v-if="uid !== null && role === 'user'">设置</el-dropdown-item>
          <el-dropdown-item v-on:click.native="dialogFormVisible_xg = true" v-if="uid !== null && role === 'seller'">修改密码</el-dropdown-item>
        </el-dropdown-menu>
        <img src="static/yh.png" class="yh-img">
      </el-dropdown>
    </el-col>
  </el-row>
  <!--  修改密码-->
  <el-dialog title="修改密码" :visible.sync="dialogFormVisible_xg" append-to-body>
    <el-row>
      <el-col :span="24">
        <el-form :model="form">
          <el-form-item label="旧密码">
            <el-input type="password" v-model="form.oldPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="新密码">
            <el-input type="password" v-model="form.newPwd" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认新密码">
            <el-input type="password" v-model="form.reNewPwd" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <el-row class="adjustment-bottom-button" type="flex" justify="center">
          <el-col :span="12">
            <el-button v-on:click="changepwd">保存修改</el-button>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-dialog>
  <el-dialog title="历史购买记录" :visible.sync="dialogBuyInformationVisible" append-to-body="true">
    <el-table
      :data="historyList"
      show-header="true"
    >
      <el-table-column min-width="20%" label="商品图">
        <template slot-scope="scope">
          <img :src="scope.row.orderMediaPath[0]['1']" class="history-img">
        </template>
      </el-table-column>
      <el-table-column min-width="20%" prop="goodName" label="商品名">

      </el-table-column>
      <el-table-column min-width="20%" prop="price" label="商品价格">

      </el-table-column>
      <el-table-column min-width="40%" prop="transactionAdderss" label="收货地址">

      </el-table-column>
    </el-table>
  </el-dialog>
</div>
</template>

<script>
export default {
  name: "TopA",
  data() {
    return {
      customName: null,
      search: null, //搜索框的内容
      dialogFormVisible_login: false,
      dialogBuyInformationVisible: false,
      dialogFormVisible_xg: false,
      uid: null,
      historyList: null,
      role: null,
      form: {
        user: '',
        account: '',
        password: '',
        oldPwd: '',
        newPwd: '',
        reNewPwd: ''
      },
    }
  },
  methods: {
    login : function () {
      this.$router.push({
        path: '/loginA',
      })
      // this.dialogFormVisible_login = true;
    },
    //注册
    register: function () {
      this.$router.push({
        path: '/Register',
      })
    },
    updateInformation: function () {
      this.$router.push({
        path: "/CustomHome",
      })
    },
    empty: function () {
      this.customName = null;
      this.search = null;//搜索框的内容
      this.dialogFormVisible_login = false;
      this.dialogBuyInformationVisible = false;
      this.uid = null;
      this.historyList = null;
      this.form = {
        user: '',
        account: '',
        password: ''
      };
    },
    unlogin: function () {
      sessionStorage.removeItem("uerId");
      sessionStorage.removeItem("username");
      sessionStorage.removeItem("role");
      sessionStorage.removeItem("phone");
      sessionStorage.removeItem("transactionAddress");
      sessionStorage.removeItem("token");
      this.empty();
      this.$router.push({
        path: "/loginA",
      })
    },
    backHome: function () {
      this.$router.push({
        path: "/home_A"
      })
    },
    searchGood: function () {
      this.$router.push({
        path: '/good_temp',
        query: {
          data: this.search
        }
      })
      // this.$api.good.getGoodsOnSale({
      //   goodName: this.search
      // }).then(res => {
      //   console.log("search", res);
      //   if (res.data.code === 200) {
      //     this.goodList = res.data.data;
      //     this.changeFormat();
      //   }
      // })
    },
    historyBuy: function () {
      this.$api.user.getOrderByuser_idY({
        userId: sessionStorage.getItem("userId")
      }).then(res => {
        console.log("orderBuy", res);
        this.historyList = res.data.data;
      })
    },
    changepwd: function () {
      const loading = this.$loading({
        lock: true,
        text: "正在修改中",
        spinner: "el-icon-loading",
        background: "rgba(255, 255, 255, 0.8)",
        target: "el-dialog dialog",
        customClass: "loading-customClass"
      });
      this.$api.seller.changePwd({
        userName: sessionStorage.getItem("username"),
        oldPwd: this.form.oldPwd,
        newPwd: this.form.newPwd
      }).then(res => {
        console.log("changepwd", res);
        if (res.data.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.form.oldPwd = null;
          this.form.newPwd = null;
          this.form.reNewPwd = null;
          loading.close();
          this.dialogFormVisible_xg = false;
        }
        loading.close();
      })
    },
    dataInit: function () {
      this.customName = sessionStorage.getItem("username");
      this.uid = sessionStorage.getItem("userId");
      this.role = sessionStorage.getItem("role");
      // this.$http.post("http://rap2api.taobao.org/app/mock/293261/user/getOrderByuser_idX", null, {
      //   params: {
      //     userId: sessionStorage.getItem("userId")
      //   }
      // }).then(res => {
      //   this.historyList = res.data.history;
      //   // alert(JSON.stringify(res.data))
      // })
      this.historyBuy();
    }
  },
  created() {
    this.dataInit();
  }
}
</script>

<style scoped>
#TopA {
  position: fixed;
  width: 100%;
  height: 10%;
  vertical-align: middle;
  background: rgba(176, 224, 230, 1);
  z-index: 999;
}
.adjustment {
  padding-top: 10px;
}
.title {
  font-size: 60px;
  margin: 0 auto;
  text-align: center;
  color: rgba(28, 28, 28, 0.6)
}
.input-search {
  width: 450px;
}
.yh-img {
  width: 60px;
  height: 60px
}
.cd-img {
  width: 30px;
  height: 30px
}
.history-img {
  width: 50px;
  height: 50px;
}
/deep/ .el-table {
  max-height: 600px;
  overflow-y: auto;
}
/deep/ .el-dialog__title {
  font-size: 30px;
}
/deep/ .el-dialog {
  border-radius: 20px;
}
>>> .el-dropdown-menu__item:hover {
  color: #B0E0E6;
}
>>> .el-dialog {
  width: 400px;
  border-radius: 25px;
}
>>> .el-dialog__title {
  line-height: 30px;
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
  font-weight: bold;
}
>>> .el-dialog__body {
  padding: 10px 40px;
}
>>> .el-dialog__header {
  padding: 10px 40px;
  background: rgba(176, 224, 230, 0.8);
  border-radius: 25px 25px 0 0;
}
>>> .el-dialog__close {
  font-size: 30px;
  color: rgba(28, 28, 28, 0.6);
}
>>> .el-button {
  background: rgba(176, 224, 230, 1);
  padding: 10px 20px 10px 20px;
  color: white;
  font-size: 24px;
  font-weight: 500;
}
>>>.el-form-item__label {
  font-size: 24px;
  font-weight: 500;
  color: #7D7D7D;
}
</style>
